<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Volta – 唱片公司和音乐流媒体</title>
    <link rel="shortcut icon" href="static/img/favicon.ico"/>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
</head>
<body>
<jsp:include page="/pages/common/NAV.jsp"></jsp:include>
<!-- main content -->
<main class="main">
    <div class="container-fluid">
        <div class="row row--grid">
            <!-- breadcrumb -->
            <div class="col-12">
                <ul class="breadcrumb">
                    <li class="breadcrumb__item"><a href="index.jsp">主页</a></li>
                    <li class="breadcrumb__item"><a href="pages/store.jsp">商店</a></li>
                    <li class="breadcrumb__item breadcrumb__item--active">产品</li>
                </ul>
            </div>
            <!-- end breadcrumb -->
            <!-- title -->
            <div class="col-12">
                <div class="main__title main__title--page">
                    <h1>${requestScope.produce.pname}</h1>
                </div>
            </div>
            <!-- end title -->
            <div class="col-12">
                <div class="store-item">
                    <div class="store-item__content">
                        <div class="store-item__carousel owl-carousel">
                            <c:forEach items="${requestScope.imgas}" var="img">
                                <div class="store-item__cover">
                                    <img src="${img.image}" alt="">
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                    <div class="store-item__description">
                        <!-- article content -->
                        <div class="article__content">
                            <input type="hidden" name="pid" value="${requestScope.produce.id}">
                            <h4>关于 ${requestScope.produce.pname}</h4>
                            <span class="article__price">$${requestScope.produce.price}</span>
                            <c:if test="${!empty requestScope.produce.oldprice}">
                                <span style="text-decoration: line-through;color: red">$${requestScope.produce.oldprice}</span>
                            </c:if>
                            <p>${requestScope.produce.introduction}</p>
                            <div class="article__amount">
                                <button onclick="decreaseCount()">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M19,11H5a1,1,0,0,0,0,2H19a1,1,0,0,0,0-2Z"></path>
                                    </svg>
                                </button>
                                <input type="text" name="count" value="1">
                                <button onclick="increaseCount()">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"></path>
                                    </svg>
                                </button>
                            </div>
                            <a href="javascript:void(0)" class="article__buy" onclick="toCart()">加入购物车</a>
                            <script>
                                var count = parseInt($("input[name=count]").val());
                                var produceId = $("input[name=pid]").val();

                                function decreaseCount() {
                                    if (count > 1) {
                                        count -= 1;
                                        $("div.article__content input[name=count]").val(count);
                                    }
                                }

                                function increaseCount() {
                                    count += 1;
                                    $("div.article__content input[name=count]").val(count);
                                }

                                function toCart() {
                                    $.get("CartItemServlet", {
                                        action: "addItem",
                                        count: count,
                                        pid: produceId
                                    }, function (msg) {
                                        if (msg == 1) {
                                            // 将消息存储到 sessionStorage
                                            sessionStorage.setItem('message', '加入购物车成功');
                                            sessionStorage.setItem('messageType', 'success');
                                            // 刷新页面
                                            location.reload(true);
                                        } else {
                                            layer.msg("您的购物车已有此商品！", {
                                                icon: 2,
                                                time: 2000
                                            });
                                        }
                                    }, "json");
                                }

                                // 在页面加载时执行这段代码
                                window.onload = function () {
                                    // 检查 sessionStorage 是否存在消息
                                    if (sessionStorage.getItem('message')) {
                                        var message = sessionStorage.getItem('message');
                                        var messageType = sessionStorage.getItem('messageType');

                                        // 显示 layer.msg
                                        layer.msg(message, {
                                            icon: messageType === 'success' ? 1 : 2,
                                            time: 2000
                                        });
                                        // 清除消息
                                        sessionStorage.removeItem('message');
                                        sessionStorage.removeItem('messageType');
                                    }
                                }
                            </script>
                            <ul>
                                <li>主题森林</li>
                                <li>图形河</li>
                                <li>音频丛林</li>
                                <li>3D 海洋</li>
                                <li>卡纳永代码</li>
                            </ul>
                        </div>
                        <!-- end article content -->
                        <!-- share -->
                        <div class="share">
                            <a href="#" class="share__link share__link--fb">
                                <svg width="9" height="17" viewBox="0 0 9 17" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M5.56341 16.8197V8.65888H7.81615L8.11468 5.84663H5.56341L5.56724 4.43907C5.56724 3.70559 5.63693 3.31257 6.69042 3.31257H8.09873V0.5H5.84568C3.1394 0.5 2.18686 1.86425 2.18686 4.15848V5.84695H0.499939V8.6592H2.18686V16.8197H5.56341Z"/>
                                </svg>
                                share</a>
                            <a href="#" class="share__link share__link--tw">
                                <svg width="16" height="12" viewBox="0 0 16 12" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M7.55075 3.19219L7.58223 3.71122L7.05762 3.64767C5.14804 3.40404 3.47978 2.57782 2.06334 1.1902L1.37085 0.501686L1.19248 1.01013C0.814766 2.14353 1.05609 3.34048 1.843 4.14552C2.26269 4.5904 2.16826 4.65396 1.4443 4.38914C1.19248 4.3044 0.972149 4.24085 0.951164 4.27263C0.877719 4.34677 1.12953 5.31069 1.32888 5.69202C1.60168 6.22165 2.15777 6.74068 2.76631 7.04787L3.28043 7.2915L2.67188 7.30209C2.08432 7.30209 2.06334 7.31268 2.12629 7.53512C2.33613 8.22364 3.16502 8.95452 4.08833 9.2723L4.73884 9.49474L4.17227 9.8337C3.33289 10.321 2.34663 10.5964 1.36036 10.6175C0.888211 10.6281 0.5 10.6705 0.5 10.7023C0.5 10.8082 1.78005 11.4014 2.52499 11.6344C4.75983 12.3229 7.41435 12.0264 9.40787 10.8506C10.8243 10.0138 12.2408 8.35075 12.9018 6.74068C13.2585 5.88269 13.6152 4.315 13.6152 3.56293C13.6152 3.07567 13.6467 3.01212 14.2343 2.42953C14.5805 2.09056 14.9058 1.71983 14.9687 1.6139C15.0737 1.41264 15.0632 1.41264 14.5281 1.59272C13.6362 1.91049 13.5103 1.86812 13.951 1.39146C14.2762 1.0525 14.6645 0.438131 14.6645 0.258058C14.6645 0.22628 14.5071 0.279243 14.3287 0.374576C14.1398 0.480501 13.7202 0.639389 13.4054 0.734722L12.8388 0.914795L12.3247 0.565241C12.0414 0.374576 11.6427 0.162725 11.4329 0.0991699C10.8978 -0.0491255 10.0794 -0.0279404 9.59673 0.14154C8.2852 0.618204 7.45632 1.84694 7.55075 3.19219Z"/>
                                </svg>
                                tweet</a>
                            <a href="#" class="share__link share__link--vk">
                                <svg width="16" height="9" viewBox="0 0 16 9" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.78479 8.92255C8.78479 8.92255 9.07355 8.89106 9.22145 8.73512C9.35684 8.59224 9.35214 8.32262 9.35214 8.32262C9.35214 8.32262 9.33414 7.06361 9.92967 6.87771C10.5166 6.69489 11.2702 8.09524 12.07 8.63372C12.6741 9.04085 13.1327 8.95174 13.1327 8.95174L15.2699 8.92255C15.2699 8.92255 16.3874 8.85495 15.8576 7.99231C15.8137 7.92164 15.5485 7.35397 14.269 6.1879C12.9284 4.9673 13.1084 5.16472 14.7221 3.05305C15.705 1.76715 16.0978 0.982093 15.975 0.646407C15.8584 0.325317 15.1353 0.410582 15.1353 0.410582L12.7297 0.425177C12.7297 0.425177 12.5513 0.401365 12.419 0.478949C12.2899 0.554996 12.2061 0.732441 12.2061 0.732441C12.2061 0.732441 11.8258 1.72721 11.3179 2.57372C10.2466 4.35892 9.81855 4.4534 9.64326 4.34279C9.23554 4.08392 9.33727 3.30424 9.33727 2.75039C9.33727 1.01973 9.60491 0.298431 8.81687 0.111769C8.5555 0.0495478 8.36299 0.00883541 7.6939 0.00192196C6.83543 -0.00652779 6.10921 0.00499461 5.69758 0.202411C5.42369 0.333767 5.2124 0.627203 5.34152 0.644103C5.50038 0.664843 5.86036 0.739354 6.0513 0.994383C6.29781 1.32392 6.2892 2.06289 6.2892 2.06289C6.2892 2.06289 6.43084 4.10005 5.95818 4.35277C5.6342 4.52638 5.1897 4.17226 4.2342 2.55221C3.7451 1.7226 3.37573 0.805416 3.37573 0.805416C3.37573 0.805416 3.30451 0.634117 3.17696 0.541938C3.02279 0.430555 2.80759 0.395987 2.80759 0.395987L0.521729 0.410582C0.521729 0.410582 0.178185 0.4198 0.0521924 0.566519C-0.0597138 0.696338 0.0435842 0.965961 0.0435842 0.965961C0.0435842 0.965961 1.8333 5.07638 3.86013 7.1481C5.71871 9.04699 7.8285 8.92255 7.8285 8.92255H8.78479Z"/>
                                </svg>
                                share</a>
                        </div>
                        <!-- end share -->
                    </div>
                </div>
            </div>
        </div>

        <!-- recommend -->
        <section class="row row--grid">
            <!-- title -->
            <div class="col-12">
                <div class="main__title">
                    <h2>推荐其他</h2>
                    <a href="pages/store.jsp" class="main__link">查看全部
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z"/>
                        </svg>
                    </a>
                </div>
            </div>
            <!-- end title -->
            <c:if test="${!empty requestScope.produces}">
                <div class="col-12">
                    <div class="main__carousel-wrap">
                        <div class="main__carousel main__carousel--store owl-carousel" id="store">
                            <c:forEach var="produce" items="${requestScope.produces}">
                                <c:if test="${produce.id != (requestScope.produce.id)}">
                                    <div class="product">
                                        <a href="ProduceServlet?action=toProduce&id=${produce.id}" class="product__img">
                                            <img src="${produce.imga}" alt="">
                                        </a>
                                        <h3 class="product__title">
                                            <a href="ProduceServlet?action=toProduce&id=${produce.id}">${produce.pname}</a>
                                        </h3>
                                        <span class="product__price">${produce.price}</span>
                                        <c:choose>
                                            <c:when test="${!empty produce.oldprice}">
                                                <span class="product__new"
                                                      style="text-decoration: line-through">$${produce.oldprice}</span>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="product__new" style="color:#25a56a">新</span>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                </c:if>
                            </c:forEach>
                        </div>
                        <button class="main__nav main__nav--prev" data-nav="#store" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M17,11H9.41l3.3-3.29a1,1,0,1,0-1.42-1.42l-5,5a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l5,5a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L9.41,13H17a1,1,0,0,0,0-2Z"/>
                            </svg>
                        </button>
                        <button class="main__nav main__nav--next" data-nav="#store" type="button">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M17.92,11.62a1,1,0,0,0-.21-.33l-5-5a1,1,0,0,0-1.42,1.42L14.59,11H7a1,1,0,0,0,0,2h7.59l-3.3,3.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l5-5a1,1,0,0,0,.21-.33A1,1,0,0,0,17.92,11.62Z"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </c:if>
        </section>
        <!-- end recommend -->
    </div>
</main>
<!-- end main content -->
<%@ include file="../common/footer.jsp" %>
<%@ include file="../common/modal_info.jsp" %>

</body>
</html>